<!doctype html> 
<html> 
<head> 

    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body,html{height: 100%;}
body{
}

div{
	width: 100px;height: 100px;background: black;
}
.f2{
	background: pink;
}
[haoqing]{
	background: yellow;
}



    </style>
</head>
<body>
<div class='f1 f2' id='s' haoqing='l o'>
</div>
<div class='f1 f2' id='s' haoqing='f b'>
</div>
<div class='f1 f2' id='s' haoqing='f n'>
</div>
<script type="text/javascript">
	
	//document.querySelector('[haoqing$=b]').style.background = 'aqua';

document.querySelector('body>*:nth-child(1)').style.background = 'aqua';
</script>
</body>
</html>